<template>
  <div class="navbar">
    <div class="container">
      <ul class="menu">
        <li v-for="menu in muneList" :key="menu.name">
          <a>{{ menu.name }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "navbar",
  data() {
    return {
       
    };
  },
  props: {
    muneList: {
      type: Array,
      default: []
    }
  }
};
</script>

<style lang="less" scoped>
.navbar {
  z-index: 999;
  background-color: #fff;
  width: 100%;
  height: 50px;
  overflow: auto;
  box-shadow: 0px 0.1px 10px 0.1px rgba(0, 0, 0, 0.6);

  .container {
    width: 60%;
    height: 100%;
    margin: 0 auto;

    ul.menu {
      display: flex;
      flex-direction: row;
      list-style: none;
      align-items: center;
      height: 100%;
      justify-content: space-around;

      & > li {
        flex: 2;
        display: flex;
        justify-content: center;
      }

      & > li:last-child {
        flex: 8;

        &>a::before {
          font-family: "iconfont";
          content: '\e6c5';
          padding: 3px 15px 0 0;
          color: #e74c3c;
        }
      }

      a {
        text-decoration: none;
        color: #000;
        cursor: pointer;

        &:hover {
          color: #e74c3c;
        }
      }
    }
  }
}
</style>